<script>
    $('.collapse').collapse();
</script>
<!-- Account Index Grid Section -->
<section id="account-index" class="bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 well">
                <div class="jumbotron">
                    <h1>My Accounts</h1>
                    <p>Here are all accounts you've created. You can create and manage more than one accounts
                       with single registration.</p>
                    <button type="button" class="btn btn-info btn-lg" data-toggle="collapse" data-target="#account-manage">
                        Manage Accounts
                    </button>
                    <div id="account-manage" class="collapse" style="margin-top:10px;">
                        <%= link_to 'Add New Account', new_account_path, { :class =>"btn btn-success btn-lg" } %>
                        <%= link_to 'Edit Accounts', nil, { :class =>"btn btn-warning btn-lg" } %>
                        <%= link_to 'Update Registration', edit_user_registration_path, { :class =>"btn btn-danger btn-lg" } %>
                    </div>
                  </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 col-sm-6 tour-item">
                <a href="#tourModal1" class="tour-link" data-toggle="modal">
                    <div class="tour-hover">
                        <div class="tour-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="<%= image_url 'landing/tour/roundicons.png' %>" class="img-responsive" alt="">
                </a>
                <div class="tour-caption">
                    <h4>Round Icons</h4>
                    <p class="text-muted">Graphic Design</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 tour-item">
                <a href="#tourModal2" class="tour-link" data-toggle="modal">
                    <div class="tour-hover">
                        <div class="tour-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="<%= image_url 'landing/tour/startup-framework.png' %>" class="img-responsive" alt="">
                </a>
                <div class="tour-caption">
                    <h4>Startup Framework</h4>
                    <p class="text-muted">Website Design</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 tour-item">
                <a href="#tourModal3" class="tour-link" data-toggle="modal">
                    <div class="tour-hover">
                        <div class="tour-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="<%= image_url 'landing/tour/treehouse.png' %>" class="img-responsive" alt="">
                </a>
                <div class="tour-caption">
                    <h4>Treehouse</h4>
                    <p class="text-muted">Website Design</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 tour-item">
                <a href="#tourModal4" class="tour-link" data-toggle="modal">
                    <div class="tour-hover">
                        <div class="tour-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="<%= image_url 'landing/tour/golden.png' %>" class="img-responsive" alt="">
                </a>
                <div class="tour-caption">
                    <h4>Golden</h4>
                    <p class="text-muted">Website Design</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 tour-item">
                <a href="#tourModal5" class="tour-link" data-toggle="modal">
                    <div class="tour-hover">
                        <div class="tour-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="<%= image_url 'landing/tour/escape.png' %>" class="img-responsive" alt="">
                </a>
                <div class="tour-caption">
                    <h4>Escape</h4>
                    <p class="text-muted">Website Design</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 tour-item">
                <a href="#tourModal6" class="tour-link" data-toggle="modal">
                    <div class="tour-hover">
                        <div class="tour-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="<%= image_url 'landing/tour/dreams.png' %>" class="img-responsive" alt="">
                </a>
                <div class="tour-caption">
                    <h4>Dreams</h4>
                    <p class="text-muted">Website Design</p>
                </div>
            </div>
        </div>
    </div>
</section>

